<script setup lang="ts">
import Trash from '@iconify-icons/tabler/trash'
import AlertCircleFilled from '@iconify-icons/tabler/alert-circle-filled'
import type {CrudDelConfirmBtnPropsType} from './types'

defineOptions({
  name: 'XCrudDelConfirmBtn'
})

const props = withDefaults(defineProps<CrudDelConfirmBtnPropsType>(), {
  iconProps: {} as any,
  text: '删除',
  btnProps: {} as any,
  click: () => {
  },
  collapse: false,
  disabled: false,
  tooltipProps: {} as any,
  tip: '是否确认删除？',
  cancel: () => {
  },
  cancelText: '取消',
  cancelBtnProps: {} as any,
  confirm: () => {
  },
  confirmText: '确认',
  confirmBtnProps: {} as any,
  popconfirmProps: {} as any,
  cascade: false,
  cascadeText: '是否级联删除？',
})

const isCascade = ref(false)
const handleConfirm = () => {
  props.confirm(isCascade.value)
}
</script>

<template>
  <x-popconfirm-btn
    :icon-props="{
      iconProps: {
        icon: Trash
      },
      ...iconProps
    }"
    :text="text"
    :btn-props="{
      type: 'error',
      ...btnProps,
    }"
    :click="click"
    :collapse="collapse"
    :disabled="disabled"
    :tooltip-props="tooltipProps"
    :tip="tip"
    :cancel="cancel"
    :cancel-text="cancelText"
    :cancel-btn-props="cancelBtnProps"
    :confirm="handleConfirm"
    :confirm-text="confirmText"
    :confirm-btn-props="confirmBtnProps"
    :popconfirm-props="{
      showIcon: false,
      ...popconfirmProps,
    }"
  >
    <template #default>
      <div :class="[cascade ? 'mb-4' : '']">
        <div class="flex items-center">
          <slot name="confirm-icon">
            <s-icon-iconify
              class="text-xl mr-1"
              :icon="AlertCircleFilled"
              color="#F0A020"
            />
          </slot>
          <slot name="confirm-text">
            <span class="text-base">{{ tip }}</span>
          </slot>
        </div>
        <slot name="cascade-confirm" :cascade="cascade">
          <div
            v-if="cascade"
            class="mt-2 flex items-center"
          >
            <span>{{ cascadeText }}</span>
            <n-switch size="small" v-model:value="isCascade"/>
          </div>
        </slot>
      </div>
    </template>
  </x-popconfirm-btn>
</template>

<style scoped lang="scss">

</style>
